<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue?.js App"></HelloWorld> -->
  <!-- <div>
    <div @click="gotoPage">点击跳转到homepage页面</div>
    <div @click="gotoB">点击跳转到B页面</div>
    <div  @click="gototreeSearchView">点击跳转到treeSearchView页面</div>
    <router-view></router-view>
  </div> -->
  <n-space vertical>
    <!-- <n-switch v-model:value="collapsed" /> -->
    <n-layout
      has-sider
      style="{height:100%}"
    >
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
        style="{height:100%}"
      >
        <n-menu
          v-model:value="activeKey"
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
          :default-expand-all="true"
        />
      </n-layout-sider>
      <n-layout>
        <!-- <span>内容</span> -->
        <router-view></router-view>
      </n-layout>
    </n-layout>

    
  </n-space>

</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import { onMounted, h } from "vue";
import { NIcon } from "naive-ui";
import {
  BookOutline as BookIcon,
  PersonOutline as PersonIcon,
  WineOutline as WineIcon,
  HomeOutline as HomeIcon,
} from "@vicons/ionicons5";
import { ref } from "@vue/reactivity";
import { RouterLink } from "vue-router";

export default {
  name: "App",
  components: {},
  // methods:{
  //   gotoPage(){
  //     this.$router.push('/homePage');
  //   },
  //   gotoB(){
  //     this.$router.push('/b');
  //   },
  //   gototreeSearchView(){
  //     this.$router.push('/treeSearchView');
  //   },
  // },
  setup() {
    const renderIcon = function (icon) {
      return () => h(NIcon, null, { default: () => h(icon) });
    };

    const setMenuData = function () {
      menuOptions.value = [
        {
          label: () =>
            h(
              RouterLink,
              {
                to: {
                  name: "treeOneView",
                },
              },
              { default: () => "搜索一级数" }
            ),
          key: "go-back-home",
          icon: renderIcon(HomeIcon),
        },
        {
          label: "首页",
          key: "hear-the-wind-sing",
          icon: renderIcon(BookIcon),
        },
        {
          label: "字典",
          key: "pinball-1973",
          icon: renderIcon(BookIcon),
          disabled: false,
          children: [
            {
              label: "分类字典",
              key: "rat",
            },
          ],
        },
        {
          label: "主题设置",
          key: "a-wild-sheep-chase",
          disabled: false,
          icon: renderIcon(BookIcon),
          children: [
            {
              label: () =>
                h(
                  RouterLink,
                  {
                    to: {
                      name: "homePage",
                    },
                  },
                  { default: () => "数据列表表头排序" }
                ),
              key: "data-list",
              icon: renderIcon(HomeIcon),
            },
            {
              label: () =>
                h(
                  RouterLink,
                  {
                    to: {
                      name: "b",
                    },
                  },
                  { default: () => "b页面" }
                ),
              key: "go-b-view",
              icon: renderIcon(HomeIcon),
            },
            {
              label: () =>
                h(
                  RouterLink,
                  {
                    to: {
                      name: "treeSearchView",
                    },
                  },
                  { default: () => "树形选择" }
                ),
              key: "tree-search",
              icon: renderIcon(HomeIcon),
            },
          ],
        },
        {
          label: "设置中心",
          key: "dance-dance-dance",
          icon: renderIcon(BookIcon),
          children: [
            {
              type: "group",
              label: "用户管理",
              key: "people",
              children: [
                {
                  label: "权限设置",
                  key: "narrator",
                  icon: renderIcon(PersonIcon),
                },
                {
                  label: "用户资料管理",
                  key: "sheep-man",
                  icon: renderIcon(PersonIcon),
                },
              ],
            },
            {
              label: "菜单管理",
              key: "beverage",
              icon: renderIcon(WineIcon),
              children: [
                {
                  label: "菜单权限",
                  key: "whisky",
                },
              ],
            },
            {
              label: "角色管理",
              key: "food",
              children: [
                {
                  label: "用户权限分配",
                  key: "sandwich",
                },
              ],
            },
            {
              label: "个人中心",
              key: "the-past-increases-the-future-recedes",
            },
          ],
        },
      ];
    };
    const menuOptions = ref([]);

    const gotoPage = function () {
      this.$router.push("/homePage");
    };
    const gotoB = function () {
      this.$router.push("/b");
    };
    const gototreeSearchView = function () {
      this.$router.push("/treeSearchView");
    };
    onMounted(() => {
      setMenuData();
    });
    return {
      gotoPage,
      gotoB,
      gototreeSearchView,
      renderIcon,
      BookIcon,
      PersonIcon,
      WineIcon,
      activeKey: ref(null),
      collapsed: ref(true),
      menuOptions,
      setMenuData,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
